<template>
  <div>
    <a-space>
      <a-input
        v-model:value="searchKeyword"
        placeholder="请输入搜索内容 (姓名或个性签名)"
      >
        <template #prefix>
          <search-outlined />
        </template>
      </a-input>
      <a-button @click="handleSearch" type="primary" ghost>搜索</a-button>
    </a-space>
    <a-table :data-source="filteredData" :columns="columns">
      <!-- 使用 bodyCell 插槽来自定义单元格内容 -->
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.key === 'resume'">
          {{ truncateText(text, 100) }}
        </template>
        <template v-else-if="column.key === 'signature'">
          {{ truncateText(text, 20) }}
        </template>
        <template v-else>
          {{ text }}
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { UploadOutlined, SearchOutlined } from "@ant-design/icons-vue";
import * as XLSX from "xlsx";

// 示例数据
const data = ref([
  {
    name: "Alice",
    gender: "Female",
    resume:
      "Experienced software engineer with over 5 years of experience in developing web applications.",
    signature: "Always learning.",
  },
  {
    name: "Bob",
    gender: "Male",
    resume:
      "Passionate about AI and machine learning. Has worked on several projects involving natural language processing.",
    signature: "Curious mind.",
  },
  {
    name: "Charlie",
    gender: "Male",
    resume:
      "Expert in cloud infrastructure and DevOps practices. Specializes in AWS and Kubernetes.",
    signature: "Cloud guru.",
  },
]);

// 定义列
const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "Gender",
    dataIndex: "gender",
    key: "gender",
  },
  {
    title: "Resume",
    dataIndex: "resume",
    key: "resume",
  },
  {
    title: "Signature",
    dataIndex: "signature",
    key: "signature",
  },
];

// 搜索关键词
const searchKeyword = ref("");

// 过滤后的数据
const filteredData = ref([]);

// 文本截断函数
function truncateText(text, maxLength) {
  return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;
}

// 搜索处理函数
function handleSearch() {
  const keyword = searchKeyword.value.trim();
  console.log(keyword);
  if (!keyword) {
    filteredData.value = data.value;
    return;
  }
  filteredData.value = data.value.filter((item) => {
    return item.name.includes(keyword) || item.signature.includes(keyword);
  });
}

// 初始化时设置过滤数据与原始数据相同
onMounted(() => {
  filteredData.value = data.value;
});
</script>
